<template>
  <div class="auth-slogan">
    <!-- 图标占位符 -->
    <div class="system-icon"></div>

    <h1 class="system-title">智能剪纸指导创作系统</h1>
    <p class="system-tagline">传承民间艺术，探索智能创作</p>
  </div>
</template>

<script setup>
// 无需逻辑
</script>

<style scoped>
.auth-slogan {
  /* 确保文本颜色为白色以在浅红色背景上显示 */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  height: 90%; /* 占满父容器高度 */
  text-align: center;
  padding: 40px;
}

.system-icon {
  /* 确保这个 div 有尺寸，图片才能显示 */
  width: 150px; /* 根据你的设计调整 */
  height: 150px; /* 根据你的设计调整 */

  /* 引用图片：使用 @/ 别名指向 src 目录 */
  background-image: url('@/assets/logo.png');

  /* 确保图片正确显示在 div 中 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.system-title {
  font-size: 2.2em;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.system-tagline {
  font-size: 1.1em;
  opacity: 0.9;
}
</style>
